<template>
<div class="content">
    <div class="mainPage padding">
        <div class="flex solid-bottom padding justify-start align-center text-center" style="color:white">
          <div class="padding-sm margin-xs radius">
            <img class="userinfo-avatar"  :src="userInfo.avatarUrl" background-size="cover"/>
          </div>
          <div class="padding-sm margin-xs radius text-xl">{{userInfo.nickName}}</div>
          <div class="padding-sm margin-xs radius">
            <picker class="weui-btn" @change="PickerChange" :value="indexPicker" :range="questionBank">
               <button class="cu-btn round line-yellow button-hover">{{questionBank[indexPicker]}}</button>
            </picker>
          </div>
        </div>
        <div class="padding flex flex-direction text-center">
            <button class="cu-btn bg-mauve margin-tb-sm lg" @click="clickToChallenge">
              <span>挑战赛<br/>Ranked match</span>
            </button>
            <button class="cu-btn bg-mauve margin-tb-sm lg" @click="clickToFriend">
              <span>好友挑战<br/>challenge a friend</span>
            </button>
        </div>
    </div>
    <div class="cu-bar tabbar bg-white shadow foot bottombar">
        <div class="action" bindtap="NavChange" data-cur="basics" >
              <image class="bar_home" :style="home_select"></image>
              <div class="text-gray">主页</div>
          </div>
          <div class="action" bindtap="NavChange" data-cur="component" @click="rankPage" >
             <image class="bar_rank" :style="rank_select"></image>
            <div class="text-gray">排行榜</div>
          </div>
    </div>
</div>
</template>

<script>
import backgroundimg from '@/components/backgroundimg'
import card from '@/components/card'

export default {
  data () {
    return {
      userInfo: {
        nickName: '',
        avatarUrl: ''
      },
      isShow: false,
      indexPicker: 0,
      questionBank: ['一年级题库', '二年级题库', '三年级题库', '四年级题库', '五年级题库', '六年级题库'],
      home_select: 'background-image: url(' + '../../../static/tabs/mainIcon_selected.png' + ')',
      rank_select: 'background-image: url(' + '../../../static/tabs/rankIcon.png' + ')'
    }
  },
  methods: {
    homePage () {
      this.home_select = 'background-image: url(' + '../../../static/tabs/mainIcon_selected.png' + ')'
      this.rank_select = 'background-image: url(' + '../../../static/tabs/rankIcon.png' + ')'
      const url = '../main/main'
      mpvue.navigateTo({url})
    },
    rankPage () {
      const url = '../rank/main'
      mpvue.navigateTo({url})
    },
    clickToChallenge () {
      const url = '../wait/main?nickName=' + this.userInfo.nickName + '&avatarUrl=' + this.userInfo.avatarUrl
      mpvue.navigateTo({url})
    },
    clickToFriend () {
      console.log(this.userInfo.avatarUrl)
      /*
      const url = '../waitFriends/main?nickName=' + this.userInfo.nickName + '&avatarUrl=' + this.userInfo.avatarUrl
      */
      const url = '../startPage/main?nickName=' + this.userInfo.nickName + '&avatarUrl=' + this.userInfo.avatarUrl
      mpvue.navigateTo({url})
    },
    PickerChange (e) {
      console.log('序号：' + e.mp.detail.value)
      console.log('选中的值为：' + this.questionBank[e.mp.detail.value])
      this.indexPicker = e.mp.detail.value
    }
  },
  components: {
    backgroundimg,
    card
  },
  onLoad: function (options) {
    // console.log(options)
    this.userInfo.nickName = options.nickName
    this.userInfo.avatarUrl = options.avatarUrl
  }
}
</script>

<style>
.mainPage{
    background-image: url("");
    background-size: 100% 100%;
    height:92%;
    width:100%;
    position: absolute;
}
.bottombar{
  position: absolute;
  width: 100%;
  height: 8%;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.cu-btn.lg{
  height:200rpx;
  font-size: 40rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

.bg-mauve{
  background-color: rgb(55, 50, 107);
}
.padding{
  padding: 10rpx;
}
.padding-sm{
  padding: 5rpx;
}
.bar_home{
   margin: 0 auto;
   max-width: 60rpx;
   max-height: 60rpx;
   background-size: 100% 100%;
}
.bar_rank{
  margin: 0 auto;
   max-width: 60rpx;
   max-height: 60rpx;
   background-size: 100% 100%;
}
</style>